<template>
    <div class="score-state">
        <Tabs>
            <TabPane label="历史得分率" name="name2">
                <pie-charts :data="accuracyData" v-if="accuracyData" :attrs="attrs" />
            </TabPane>
            <TabPane label="自评分总汇" name="name3">
                <radar-charts :data="evaluationData" v-if="evaluationData"/>
            </TabPane>
        </Tabs>
        
    </div>
</template>

<script>
    import radarCharts from "@/components/radarCharts"
    import pieCharts from "@/components/pieCharts"
    import {lesson_score} from "@/common/tapi"
    export default {
        props:['lid'],
        data() {
            return {
                accuracyData:null,
                evaluationData:null, 
            }
        },
        components:{
            radarCharts,
            pieCharts,
        },
        created(){
            lesson_score({lid:this.lid})
            .then(res=>{
                if(res){
                    const evaluation={}
                    const accuracy={
                        '60%以下':0,
                        '60%~70%':0,
                        '70%~80%':0,
                        '80%~90%':0,
                        '90%~100%':0,
                    }
                    for (const key in res.data.charts.evaluation) {
                        if (res.data.charts.evaluation[key]) {
                            evaluation[key]=res.data.charts.evaluation[key]
                        }
                    }
                    this.evaluationData=evaluation
                    res.data.charts.transcript.forEach(el => {
                        if(el.accuracy<60)
                            accuracy['60%以下']++
                        else if(el.accuracy<70)
                            accuracy['60%~70%']++
                        else if(el.accuracy<80)
                            accuracy['70%~80%']++
                        else if(el.accuracy<90)
                            accuracy['80%~90%']++
                        else
                            accuracy['90%~100%']++
                    });
                    this.accuracyData={
                        title:'得分率区块图',
                        data:accuracy
                    }

                    this.attrs={
                        tooltip: {
                            trigger: 'item',
                            formatter: '有{c}次提交得分率在{b} '
                        },
                    }

                }
            })
        }
    }
</script>

